<template>
	<div class="app">
		<div>
			<h3 class="title"><span style="color: green;">公众监督数据管理/</span>确认AQI数据列表</h3>
		</div>
		<div class="searchList">
			<div class="provinceSearch">  <!-- 按所在省查询 -->
				<el-form-item label="省区域" prop="province">
					<el-select  v-model="reqdata.message.province" placeholder="全部" style="width: 150px" @focus="getProvince">
						  <el-option
							v-for="item in provinceList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						  />
						</el-select>
				</el-form-item>
			</div>
			<div class="citySearch">  <!-- 按所在市查询 -->
				<el-form-item label="市区域" prop="city">
					<el-select v-model="reqdata.message.city" placeholder="全部" style="width: 150px" @focus="getCity" @blur="emptyCity">
						  <el-option
							v-for="item in cityList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						  />
						</el-select>
				</el-form-item>
			</div>
			<div class="blockSearch"> <!-- 按反馈日期查询 -->
			    <el-form-item label="确认日期" prop="date">
			    <el-date-picker
			        v-model="reqdata.message.date"
			        type="date"
			        placeholder="请选择日期"
					style="width: 150px"
					value-format="YYYY-MM-DD"
			    />
				</el-form-item>
			</div>
			<div class="button">  <!-- 查询与清空按钮 -->
				<el-button type="danger" @click="empty" plain>清空</el-button>
				<el-button type="primary" @click="search" plain>查询</el-button>
			</div>
		</div>
		<br>
		<div class="showTable">
			<el-table :data="backdata" :default-sort="{ prop: 'date', order: 'descending' }"  style="width: 100%" v-loading="loading" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" :row-style="tableRowStyle">
			    <el-table-column prop="id" label="编号" width="180" />
				<el-table-column prop="province" label="所在省" width="230" />
				<el-table-column prop="city" label="所在市" width="220" />
				<el-table-column prop="level" label="预估污染等级" width="230">
					<template #default="scope">
						<span :style="{color:levelColor(scope.row.level)}" style="font-weight: bold;">{{scope.row.level}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="确认日期" sortable width="230" />
				<el-table-column prop="time" label="确认时间" width="220" />
				<el-table-column prop="GriderName" label="网格员" width="130" />
				<el-table-column prop="SupervisorName" label="反馈者" width="130" />
				<el-table-column label="操作" width="55">
				    <template #default="scope">
						<div class="operation">
							<div>
							<el-icon @click="details(scope.row.id)" class="document"><Document /></el-icon>	
							</div>
						</div>
				    </template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page">
			<el-pagination 
			:page-size="reqdata.pageSize"
			layout="prev, pager, next" 
			background
			class="mt-4"
			:total="total"
			v-model:current-page="reqdata.pageNum"
			@current-change="search"
			/>
		</div>
	</div>
</template>

<script setup>
	import { ref ,reactive,onMounted} from 'vue';
	import {Document,Pointer} from '@element-plus/icons-vue'
	import axios, { spread } from 'axios';
	import { useRouter } from 'vue-router';
	import router from '@/router';
import { ElMessage } from 'element-plus';
	let reqdata = reactive({
		pageNum : 1,
		pageSize : 10,
		message : {
			province :null,
			city : null,
			date : null
		}
	})
	let page = reactive({
		pagesize : '10'
	})
	let loading = ref(true)
	let total =ref(0)
	let provinceList = reactive([])
	let cityList = reactive([])
	let levelList = reactive([])
	let backdata = reactive([])
	let getCity = function(){
			axios.get(
			"http://localhost:7000/service-nepm/administrator/getCityList",
			{
				params : {id : reqdata.message.province}
			}
			).then(res=>{cityList.splice(0, cityList.length, ...res.data); // 更新 cityList
			console.log(cityList);})
	}
	let getProvince = function(){
		axios.get("http://localhost:7000/service-nepm/administrator/getProvince").then(res=>{provinceList.splice(0,provinceList.length,...res.data);console.log(provinceList);})
	}
	
	let getLevel = function(){
		axios.get("http://localhost:7000/service-nepm/administrator/getLevelList").then(res=>{levelList.splice(0,levelList.length,...res.data); console.log(levelList)})
	}
	let emptyCity = function(){
		cityList.splice()
	}
	let empty = function(){
		reqdata.message.province=null;
		reqdata.message.level=null;
		reqdata.message.city=null;
		reqdata.message.date=null;
		reqdata.message.status=3
		search();
	}
	let search = function(){
		ElMessage.success('加载列表完成')
		axios.post("http://localhost:7000/service-nepm/administrator/getFinished",reqdata).then(res=>{backdata.splice(0,backdata.length,...res.data.result);total.value=res.data.total;console.log(res.data)}) //方法不对
		loading.value = false
	}
	let levelColor = (level)=>{
		 let color; 
		 switch (level) { 
			 case '优（一）': color = '#1be21f'; break; 
			 case '良（二）': color = '#dddd23'; break; 
			 case '轻度污染（三）': color = '#fc8016'; break; 
			 case '中度污染（四）': color = '#f5150d'; break; 
			 case '重度污染（五）': color = '#970c4d'; break; 
			 case '严重污染（六）': color = '#5e041a'; break; 
			 default: color = 'black'; 
			 } 
		return color ;
	}
	let details = function(id){
		axios.get(
		"http://localhost:7000/service-nepm/administrator/getchoose",
		{
			params:{id : id}
		}
		).then(res=>{
			router.push({
				path : '/griderConfirmDataDetails',
				query : {
					data : JSON.stringify(res.data)
				}
			})
			console.log(JSON.stringify(res.data))
		})
	}
		const tableRowStyle = (row) => {
    return row.rowIndex % 2 === 0 ? 
        { background: '#ffffff' } : 
        { background: '#C8F3E9' }; // 浅绿色
};
	onMounted(()=>{
		search()
	})
</script>

<style scoped>
	.title{
		font-size: 15px;
	}
	.searchList{
		width: 85vw;
		height: 40px;
		display:flex;
	}
	.provinceSearch{
		margin-right: 40px;
	}
	.citySearch{
		margin-right: 40px;
	}
	.blockSearch{
		margin-right: 40px;
	}
	.button{
		margin-right: 40px;
	}
	.showTable{
		height: 30vw;
		margin-bottom: 50px;
	}
	.page{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.document{
		margin-right: 5px;
		color: blue;
	}
	.pointer{
		color: red;
	}
	.operation{
		display: flex;
		margin-left: 7px;
	}
		.el-table {
    --el-table-row-hover-bg-color: #A3E8E0; /* 鼠标悬停行的背景色 */
}
</style>